{extend name='admin@public/content'}

{block name="button"}
<button data-open='{:url("$classuri/")}' data-title="返回列表" class='layui-btn layui-btn-sm layui-btn-primary'><i class='fa fa-arrow-left'></i> 返回列表</button>
{/block}

{block name='content'}

<!--右侧编辑区 开始-->
<div class="panel panel-default article-right" style="overflow:hidden;width: 960px;">
    <div class="panel-body">
        <form class="form-horizontal" data-auto="true" onsubmit="return false;">

            <div class="form-group">
                <div class="col-md-12">
                    <div class="input-group">
                        <span class="input-group-addon">标题</span>
                        <input maxlength="200" required="required"  name="title" value="{$vo.title|default=''}" title="标题不能为空哦" placeholder="请在这里输入标题" class="layui-input">
                        <input type="hidden" name="id" value='{$vo.id|default=""}'>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-12">
                    <div class="input-group">
                        <span class="input-group-addon">作者</span>
                        <input maxlength="8" required="required" title="作者不能为空哦" placeholder="请输入作者" name='author' value="{$vo.author|default=''}" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-12">
                    <div class="input-group">
                        <span class="input-group-addon">文章分类</span>
                        <select name='category_id' class='layui-select' style='display:block;width:30% !important;'>
                            {foreach $category_list as $key=>$value}
                            {if isset($vo.category_id) and $key == $vo.category_id}
                            <option  value='{$key}' selected>{$value}</option>
                            {else/}
                            <option  value='{$key}'>{$value}</option>
                            {/if}
                            {/foreach}
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-12">
                    <div class="form-control" style="height:auto">
                        <label style="color:#333;font-size: 12px;">文章封面图片设置</label>
                        <div class="row nowrap">
                            <div class="col-xs-3" style="width:160px;">
                                <div class="upload-image-box" style="background-image: url({$vo.cover|default=$image})">
                                    <input value="{$vo.cover|default=$image}" type="hidden" name="cover">
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <br>
                                <a data-file="one" data-type="jpg,png,jpeg" data-field="cover" class="btn btn-sm">上传图片</a>
                            </div>
                        </div>
                        <p class="help-block" style="margin-top:10px;color:#ccc;font-size: 12px;">封面大图片建议尺寸：640像素 * 480像素</p>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-12">
                    <textarea name="content">{$vo.content|default=""}</textarea>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-12">
                    <label style="color:#333">摘要选填(如果不填写会默认抓取正文前50个字)</label>
                    <textarea name="summary" class="layui-input" style="height:80px;resize:none;"></textarea>
                </div>
            </div>

            <div class="form-actions">
                <div class="row">
                    <div class="layui-form-item text-center">
                        <button class="layui-btn" type='submit'>保存数据</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!--右侧编辑区 结束-->

{/block}


{block name='script'}
<script>
    $(function () {
        $('body').on('change', '.upload-image-box input', function () {
            $('.news-item.active').css('background-image', 'url(' + this.value + ')');
            $(this).parent('.upload-image-box').css('background-image', 'url(' + this.value + ')');
        });

        // 编辑器
        require(['jquery', 'ckeditor', 'angular'], function () {
            window.form.render();
            window.createEditor('[name="content"]', {height: 420});
            var app = angular.module("ProductForm", []).run(callback);
            angular.bootstrap(document.getElementById(app.name), [app.name]);

            function callback($rootScope) {
                // 绑定规格列表
                $rootScope.specs = [];
                // 规格默认数据
                var specdata = JSON.parse('{$vo.list|default=[]|json_encode=###,256|raw}');
                // 单图片上传处理
                $('#ProductForm [name="goods_logo"]').uploadOneImage();
                // 多图片上传处理
                $('#ProductForm [name="goods_image"]').uploadMultipleImage();
                // 规格显示切换
                $('#ProductForm').on('click', '[data-spec]', applySpecData);
                // 商品规格切换
                $('#ProductForm').on('change', '[name="spec_id"]', function () {
                    var specs = eval(this.options[this.selectedIndex].getAttribute('data-param'));
                    for (var i in specs) {
                        specs[i].param = [];
                        var values = specs[i].value.split(' ');
                        for (var j in values) {
                            specs[i].param.push({
                                name: specs[i].name, value: values[j],
                                checked: getSpecStatus(specs[i].name, values[j])
                            });
                        }
                    }
                    $rootScope.$apply(function () {
                        $rootScope.specs = specs;
                        setTimeout(applySpecData, 10);
                    });
                }).find('[name="spec_id"]').trigger('change');

                // 规格属性切换
                function applySpecData() {
                    var params = {};
                    for (var i in $rootScope.specs) {
                        var isChecked = false;
                        for (var j in $rootScope.specs[i].param) {
                            if ($rootScope.specs[i].param[j].checked) {
                                isChecked = true;
                                var name = $rootScope.specs[i].param[j].name;
                                var value = $rootScope.specs[i].param[j].value;
                                (params[name] || (params[name] = [])).push({name: name, value: value});
                            }
                        }
                        if (!isChecked) {
                            $rootScope.specs[i].param[0].checked = true;
                            var name = $rootScope.specs[i].param[0].name;
                            var value = $rootScope.specs[i].param[0].value;
                            (params[name] || (params[name] = [])).push({name: name, value: value});
                        }
                    }
                    $rootScope.$apply(function () {
                        $rootScope.specdata = DataArray.render(params);
                    });
                }

                // 获取规格选择状态
                function getSpecStatus(name, spec) {
                    for (var i in specdata) {
                        if (specdata[i].goods_spec.indexOf(name + ':' + spec) > -1) {
                            return true;
                        }
                    }
                    return false;
                }

                // 数据处理
                var DataArray = new function () {
                    // 编译生成规格数据
                    this.render = function (data) {
                        var specs = [], list = [];
                        for (var i in data) {
                            specs = this.joinArray(data[i], specs, i);
                        }
                        (specs.length < 1) && (specs = ['default:default']);
                        for (var i in specs) {
                            var specName = specs[i];
                            var specTitle = (specName === 'default:default') ? '默认规格' : specName.replace(/,/ig, ';').replace(/:/ig, ':');
                            var specAttrs = [], lines = specTitle.split(';');
                            for (var j in lines) {
                                var line = lines[j].split(':');
                                specAttrs.push({name: line[0], value: (line[1] || '').split(',')});
                            }
                            list.push({
                                spec_name: specName, spec_title: specTitle, spec_attrs: specAttrs,
                                market_price: parseFloat(this.getData(specs[i], 'market_price') || '0').toFixed(2),
                                selling_price: parseFloat(this.getData(specs[i], 'selling_price') || '0').toFixed(2),
                                status: this.getData(specName, 'status') !== '0'
                            });
                        }
                        return list;
                    };
                    // 读取规格默认数据
                    this.getData = function (spec, field) {
                        for (var i in specdata) {
                            if (specdata[i].goods_spec === spec) {
                                return specdata[i][field] || '0';
                            }
                        }
                        return '1';
                    };
                    // 数组交叉计算
                    this.joinArray = function (item, list, pk) {
                        var _list = [];
                        for (var i in item) {
                            if (list.length > 0) {
                                for (var j in list) {
                                    _list.push(list[j] + ',' + pk + ':' + item[i].value);
                                }
                            } else {
                                _list.push(pk + ':' + item[i].value);
                            }
                        }
                        return _list;
                    }
                };
            }
        });
    });
</script>
{/block}

{block name="style"}
<style>
    .panel{border-radius:0}
    .article-right {position:absolute;left:20px;position:absolute;}
    .article-right .layui-input{border-radius:0;border:1px solid #e5e6e7;}
    .article-right .layui-input:hover, .news-right .layui-input:focus{border-color:#e5e6e7!important;}
    .article-right .input-group-addon{background:#fff;border-radius:0;border-color:#e5e6e7;}
    .article-right .upload-image-box{width:150px;height:120px;background-size:cover;background-position:center center;}
</style>
{/block}